<template>
  <div v-if="state.popupPageReady">
    <div style="height: 40vh; overflow-y: auto">
      <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.hisList">
        <template #columns>
          <a-table-column title="预计吨单价" data-index="jiage"></a-table-column>
          <a-table-column title="最后更新时间" data-index="cdefine1"></a-table-column>
        </template>
      </a-table>
    </div>
    <div style="height: 50vh;">
      <div ref="echartspanel" style="width: 1066px;height: 50vh"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import dayjs from 'dayjs'
import { reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps } from "vue";
import * as echarts from 'echarts';
let props = defineProps({
  caizhiid : {type : Number, default: 0}
})
const echartspanel = ref(null);

const state = reactive({
  hisList : [],
  dataList:[],
  valueList:[],
  popupPageReady : true,
})
const loadHis = ()=>{
  axios.post('/caizhi/listhiscaizhi', {id : props.caizhiid}).then(res => {
    const { data } = res
    state.hisList = data
    const hisListReverse = state.hisList.slice().reverse()
    hisListReverse.forEach(it=>{
      state.valueList.push(it.jiage)
      state.dataList.push(dayjs(it.cdefine1).format("MM-DD"))
    })
    state.popupPageReady = true
    createCharts();
  })
}

const createCharts = () => {
  const chartInstance = echarts.init(echartspanel.value);
  const option = {
    xAxis: {
      type: 'category',
      data: state.dataList
    },
    yAxis: {
      type: 'value',
      boundaryGap:[0, 8]
    },
    series: [
      {
        data: state.valueList,
        type: 'line',
        itemStyle: {
          normal: {
            color:'#249b9b',
            opacity: 1,
            barBorderRadius: 5,
          }
        },
        label: {
          show: true, // 显示数值
          color:"#249b9b",
          position: 'top' // 在顶部显示
        },
      }
    ]
  };
  chartInstance.setOption(option);
}
onMounted(()=>{
  loadHis();
})
onUnmounted(()=>{

})
</script>

<style scoped>

</style>
